<template>
<div class="header-container">
    <div class="header" >   
            <div class="icon-back" v-on:click="back"></div>        
            <div class="title">我的还价</div>
            <router-link to="/msg"><div class="msg"></div> </router-link>         
    </div>   
    <div class="nav">
        <div class="tab" v-for="(item,index) in tabList" :key="item.index" @click="chooseTab(index)" :class="{activetab:index==cur}">{{item}}</div>
    </div>
    <div  class="all" v-show="cur==0">
        <div class="content"   v-for="item in scList" :key="item.counter_id+1">
            <div class="goods-info" @click="toBargain(item.id,item.counter_id,item.hjstatus)">
                        <div class="specific_detail">
                            <img :src="imgUrl[item.type]" alt="" >
                            <div class="info ">
                                <div class="row first">
                                    <span class="hj" v-if="item.is_counteroffer==1"></span>
                                    <span class="name">{{item.united}}</span>
                                    <span class="level">{{item.level}}级</span>
                                    <span class="service">{{item.area1}}-{{item.area2}}</span>
                                    <span class="platform"> 
                                        <i class="apple" v-if="item.source==2"></i>
                                        <i class="android" v-if="item.source==1"></i>
                                    </span>
                                </div>
                                <div class="row">
                                    <span class="all_point">总评分:{{item.score_total}}</span>
                                    <span class="role_point">人物评分:{{item.score_role}}</span>
                                </div>
                                <div class="row">
                                    <span class="red" v-for="signitem in sp(item.sign)" :key="signitem">
                                        {{signitem}}
                                        </span>
                                    <span class="sc">{{item.star}}人收藏</span>
                                </div>
                            </div>               
                </div>
            </div>            
            <div class="state" v-show="item.hjstatus==0" >
                <span class="state-left grey">已失效</span>
                <span class="state-right">还价：<i class="red">￥{{item.hjprice}}元</i></span>
            </div>
            <div class="state" v-show="item.hjstatus==2" >
                <span class="state-left green">还价成功</span>
                <span class="state-right">还价：<i class="red">￥{{item.hjprice}}元</i></span>
            </div>
            <div class="state" v-show="item.hjstatus==1" >
                <span class="state-left grey">卖家未处理</span>
                <span class="state-right">还价：<i class="red">￥{{item.hjprice}}元</i></span>
            </div>
            <div class="state" v-show="item.hjstatus==3" >
                <span class="state-left red">还价失败</span>
                <span class="state-right">还价：<i class="red">￥{{item.hjprice}}元</i></span>
            </div>

        </div>
    </div>
    <div class="agree" v-show="cur==1">
        <div class="content"   v-for="item in scList" :key="item.counter_id+2">
            <div v-show="item.hjstatus==2">
            <div class="goods-info"  @click="toBargain(item.id,item.counter_id,item.hjstatus)">
                        <div class="specific_detail">
                            <img :src="imgUrl[item.type]" alt="" >
                            <div class="info ">
                                <div class="row first">
                                    <span class="hj" v-if="item.is_counteroffer==1"></span>
                                    <span class="name">{{item.united}}</span>
                                    <span class="level">{{item.level}}级</span>
                                    <span class="service">{{item.area1}}-{{item.area2}}</span>
                                    <span class="platform"> 
                                        <i class="apple" v-if="item.source==2"></i>
                                        <i class="android" v-if="item.source==1"></i>
                                    </span>
                                </div>
                                <div class="row">
                                    <span class="all_point">总评分:{{item.score_total}}</span>
                                    <span class="role_point">人物评分:{{item.score_role}}</span>
                                </div>
                                <div class="row">
                                    <span class="red" v-for="signitem in sp(item.sign)" :key="signitem">
                                        {{signitem}}
                                        </span>
                                    <span class="sc">{{item.star}}人收藏</span>
                                </div>
                            </div>               
                </div>
            </div>
            <div class="state" >
                <span class="state-left green">还价成功</span>
                <span class="state-right">还价：<i class="red">￥{{item.hjprice}}元</i></span>

            </div>
            </div>
        </div>
    </div>
    <div class="consider" v-show="cur==2">
        <div class="content"  v-for="item in scList" :key="item.counter_id+3">
            <div v-show="item.hjstatus==1">
                <div class="goods-info"  @click="toBargain(item.id,item.counter_id,item.hjstatus)">
                            <div class="specific_detail">
                                <img :src="imgUrl[item.type]" alt="" >
                                <div class="info ">
                                    <div class="row first">
                                        <span class="hj" v-if="item.is_counteroffer==1"></span>
                                        <span class="name">{{item.united}}</span>
                                        <span class="level">{{item.level}}级</span>
                                        <span class="service">{{item.area1}}-{{item.area2}}</span>
                                        <span class="platform"> 
                                            <i class="apple" v-if="item.source==2"></i>
                                            <i class="android" v-if="item.source==1"></i>
                                        </span>
                                    </div>
                                    <div class="row">
                                        <span class="all_point">总评分:{{item.score_total}}</span>
                                        <span class="role_point">人物评分:{{item.score_role}}</span>
                                    </div>
                                    <div class="row">
                                        <span class="red" v-for="signitem in sp(item.sign)" :key="signitem">
                                            {{signitem}}
                                            </span>
                                        <span class="sc">{{item.star}}人收藏</span>
                                    </div>
                                </div>               
                    </div>
                </div>
                <div class="state" >
                    <span class="state-left grey">卖家未处理</span>
                    <span class="state-right">还价：<i class="red">￥{{item.hjprice}}元</i></span>

                </div>
            </div>

        </div>
    </div>
    <div class="disagree" v-show="cur==3">
         <div class="content"   v-for="item in scList" :key="item.counter_id">
             <div v-show="item.hjstatus==3">
            <div class="goods-info"  @click="toBargain(item.id,item.counter_id,item.hjstatus)">
                        <div class="specific_detail">
                            <img :src="imgUrl[item.type]" alt="" >
                            <div class="info ">
                                <div class="row first">
                                    <span class="hj" v-if="item.is_counteroffer==1"></span>
                                    <span class="name">{{item.united}}</span>
                                    <span class="level">{{item.level}}级</span>
                                    <span class="service">{{item.area1}}-{{item.area2}}</span>
                                    <span class="platform"> 
                                        <i class="apple" v-if="item.source==2"></i>
                                        <i class="android" v-if="item.source==1"></i>
                                    </span>
                                </div>
                                <div class="row">
                                    <span class="all_point">总评分:{{item.score_total}}</span>
                                    <span class="role_point">人物评分:{{item.score_role}}</span>
                                </div>
                                <div class="row">
                                    <span class="red" v-for="signitem in sp(item.sign)" :key="signitem">
                                        {{signitem}}
                                        </span>
                                    <span class="sc">{{item.star}}人收藏</span>
                                </div>
                            </div>               
                </div>
            </div>
            <div class="state" >
                <span class="state-left red">还价失败</span>
                <span class="state-right">还价：<i class="red">￥{{item.hjprice}}元</i></span>

            </div>
             </div>
        </div>
    </div>

    

</div>
</template>
<script>
import axios from "axios";
import Pictures from "@/pages/common/Pictures";
export default {
    data(){
        return{
            cur:'',
            isShow:true,
            chooseList:[],
            scList:[],
            signList:[],
            imgUrl:Pictures.imgUrl,
            tabList:["全部","待支付","待卖家处理","已拒绝"]
        }
    },
    computed:{
        sp(){
            return function(sign){
                return (sign+'').split(';');
                };
            },
    },
    methods:{
        back(){
            this.$router.go(-1);//返回上一层
        },
        msg(){
            this.isShow =!this.isShow
        },
        chooseTab(index){
            this.cur=index
        },
        toBargain(id,counter_id,hjstatus){
            if(hjstatus==1){
               this.$router.push({
                path: '/detail',
                query: {id:id}
                })
            }else{
                 this.$router.push({
                path: '/bargain',
                query: {id:id,counter_id:counter_id}
                })
            }            
        }    
    },
    mounted(){
        var param={type:this.$route.query.type};
        axios.post("http://81.68.253.206:8081/page/getShopRoleList",
            param,
            {
                headers: {
                'token': localStorage.getItem("UserToken") }
            } 
        ).then(res=>{
            if(res.data&&res.data.data&&res.data.status){
                this.scList=res.data.data;
                
            }           
        })      
    }
    
}
</script>
<style lang="scss" scoped>
.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: rem(130);
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
     z-index: 3;
    .title{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        text-align: center;
        font-size: rem(45);
        font-weight: 700;
    }    
    .bj {
        position: absolute;
        top: rem(30);
        right: rem(120);
        width: auto;
        height: rem(60);
        font-size: rem(50);;
        cursor: pointer;
    }
    .icon-back{
        position: absolute;
        top: rem(40);
        left: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../assets/imgs/back.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
                    
    .msg{
        position: absolute;
        top: rem(40);
        right: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../assets/imgs/xinf.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;

    }
}
.box{
    display: none;
    position: relative;
 width: 100%;
 height: rem(500);
 .bjtp{
       position: absolute;
        top: rem(330);
        left: 50%;
        margin-left: rem(-138);
         width: rem(276);
        height: rem(276);
        background: url(../../assets/imgs/icon-empty-collect.png) no-repeat 50% 50%;
        background-size: auto 100%;
    }
    .txt{
        width: 100%;
        color: #888;
        position: absolute;
        top: rem(620);
        text-align: center;
        font-size: rem(40);

    }
}
.all,
.agree,
.disagree,
.consider{
    margin-top: rem(250);

}
.content{   
    width: 100%;
    padding: 0 rem(30);
    margin-top: rem(15);
    background-color: #fff;
    .goods-info{
    width: 100%;
    height: rem(260);
    background-color: #fff;


    }
    .state{
        position: relative;
        width: 100%;
        height: rem(150);
        line-height: rem(150);
        background-color: #fff;
        font-size: rem(40);
        .state-left{
            text-align: left;

        }
        .red{
            color: #e74e4b;
        }
        .green{
           color: #58c987;
        }
        .grey{
            color:#555;
        }
        .state-right{
            position: absolute;
            top: 0;
            right: rem(30);
            .red{
                color: #e74e4b;
                font-style: normal;
            }

        }
    }    
    
}


.specific_detail {
            position: relative;
            width: 100%;
            height:rem(260);
            line-height: rem(60); 
            padding:rem(40) 0;          
            border-top: 1px solid #f1f1f1;
            border-bottom: 1px solid #f1f1f1;
            img {
                float: left;
                margin-right: rem(30);
                width: rem(175);
                height: rem(175);
                border-radius: rem(15);
                border-top: 1px solid #f1f1f1;
            }
            .info {
                float: left;
                width: 60%;
                height: rem(175);

                .row {
                    width: 100%;
                    height:rem(60);
                    line-height: rem(60);
                .gs{
                        display: inline-block;
                        margin-bottom: rem(-10);
                        width: rem(50);
                        height: rem(50);
                        background: url(../../assets/imgs/gong.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                }
                .hj{
                        display: inline-block;
                        margin-bottom: rem(-10);
                        width: rem(50);
                        height: rem(50);
                        background: url(../../assets/imgs/hai.png) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .name{
                    font-size: rem(45);
                    border-right: 1px solid #f1f1f1;
                    padding-right: rem(15);
                    margin-left: rem(15);
                    }
                    .level {
                    color: #888;
                    margin-left: rem(10);
                    font-size: rem(35);
                    }
                    .all_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .role_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .red {
                        color: #e74e4b;
                        font-size: rem(35);
                        border: 1px solid #e74e4b;
                        border-radius: 3px;
                        margin-right: rem(10);
                    }
                    .service {
                        position: absolute;
                        right: rem(50);
                        color: #888;
                        font-size: rem(35);
                    }

                    .platform {
                        position: absolute;
                        right: 0px;
                        margin-top: rem(5);
                    }

                    .apple {
                        display: inline-block;
                        width: rem(50);
                        height: rem(50);
                        background: url(../../assets/imgs/apple.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .android{
                        display: inline-block;
                        width: rem(45);
                        height: rem(45);
                        background: url(../../assets/imgs/android1.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .price {
                        position: absolute;
                        right: 0px;
                        font-size: rem(50);
                        font-weight: 700;
                        color: #e74e4b;
                    }

                    .sc {
                        position: absolute;
                        right: 0px;
                        color: #888;
                        font-size: rem(35);
                    }

                }
            }
        }

.nav{
    position: fixed;
    top: rem(130);
    display: flex;
    width: 100%;
    height: rem(130);
    line-height: rem(130);
    background-color: #fff;
    text-align: center;
    font-size: rem(42);
    color: #888;
    z-index: 3;
    min-width: 320px;
    max-width: 750px;
    .tab{
        flex: 1;
    }
    .activetab{
        font-weight: 700;
        color: #1e1e1e;
        border-bottom: 2px solid #e74e4b;
    }
}






</style>